<template>
	<div class="flex-wrap-column">
		<CustomTabs
			:tabList="tabList"
			v-model:tabActive="tabActive"
			@tabClick="tabClick"
		>
			<template #right>
				<custom-btn @click="openModel"
					>{{ tabActive === 1 ? '+添加标签' : '+添加分类' }}
				</custom-btn>
			</template>
		</CustomTabs>
		<CustomGmSearch
			ref="tableRef"
			:col="columns"
			v-model:tableData="tableData"
			:formList="formList"
			v-model:formData="formData"
			class="CustomGmSearch"
			:apiConfig="apiFunction"
			@control-handel="controlHandel"
		>
		</CustomGmSearch>
	</div>
	<!-- 弹框 -->
	<CustomDialog
		v-model:visible="visible"
		v-if="visible"
		:title="dialogTitle"
		confirmText="保存"
		@confirm="save"
	>
		<BaseForm
			class="formWrap"
			ref="formWrapRef"
			v-model:modelValue="tagsForm"
			:items="CreateFormList"
			:colNum="24"
		/>
	</CustomDialog>
	<CustomDelDialog
		v-model:visible="delShow"
		:apiConfig="deleteApi"
		:apiPostData="{
			id: tagsForm?.id,
		}"
		@updateList="updateList"
	/>
</template>

<script setup lang="ts">
import CustomTabs from '@/components/customTabs/index.vue'
import CustomGmSearch from '@/components/customGmSearch/index.vue'
import CustomDelDialog from '@/components/customDelDialog/index.vue'
import {
	getClientTags,
	getTagsSortList,
	createTagsSort,
	EditTagsSort,
	deleteTagsSort,
	createTags,
	deleteTags,
	EditTags,
} from '@/api/tags'
import { userStorage } from '@/utils/storage'
import CustomDialog from '@/components/customDialog/index.vue'
import BaseForm from '@/components/baseForm/index.vue'
import { ElMessage } from 'element-plus'
const tabList = [
	{
		label: '标签查询',
		id: 1,
	},
	{
		label: '标签分类',
		id: 2,
	},
]
const tabActive = ref(1)
const tableRef = ref(null)
const tabClick = () => {
	// tableRef.value.init()
}
const formData = reactive({
	enterpriseId: userStorage.get().enterpriseId,
	categoryId: '',
})
const apiFunction = computed(() => {
	return tabActive.value === 1 ? getClientTags : getTagsSortList
})
const deleteApi = computed(() => {
	return tabActive.value === 1 ? deleteTags : deleteTagsSort
})
const columns = computed(() => {
	return tabActive.value === 1
		? [
				{ prop: 'tagName', label: '标签名称' },
				{ prop: 'categoryName', label: '所属分类', type: 'link' },
				{ prop: 'usageCount', label: '引用次数', type: 'link' },
				{
					prop: 'control',
					label: '操作',
					type: 'control',
					width: 80,
					set: {
						orderList: [
							{
								title: '编辑',
								icon: 'edit',
							},
							{
								title: '删除',
								icon: 'delete',
							},
						],
					},
				},
		  ]
		: [
				{ prop: 'categoryName', label: '标签分类名称' },
				{ prop: 'tagCount', label: '标签数', type: 'link' },
				{
					prop: 'control',
					label: '操作',
					type: 'control',
					width: 80,
					set: {
						orderList: [
							{
								title: '编辑',
								icon: 'edit',
							},
							{
								title: '删除',
								icon: 'delete',
							},
						],
					},
				},
		  ]
})

const tableData = ref([])
// 弹框功能区
const visible = ref(false)
const dialogTitle = ref('')
const tagsForm = reactive({
	id: null,
	enterpriseId: userStorage.get().enterpriseId,
	categoryId: null,
	tagName: '',
	categoryName: '',
	description: '',
})
// 分类列表
const categoryList = ref([])
const formList = computed(() => {
	return tabActive.value === 1
		? [
				{
					type: 'select',
					props: 'categoryId',
					set: {
						placeholder: '请选择分类',
					},
					options: [{ label: '全部', value: '' }, ...categoryList.value],
				},
		  ]
		: []
})

const CreateFormList = computed(() => {
	return tabActive.value === 1
		? [
				{
					title: '',
					formList: [
						{
							label: '标签名称',
							prop: 'tagName',
							type: 'input',
							rules: [
								{
									required: true,
									message: '标签名称不能为空',
									trigger: 'blur',
								},
							],
						},
						{
							label: '标签分类',
							prop: 'categoryId',
							type: 'select',
							options: categoryList.value,
							rules: [
								{
									required: true,
									message: '请选择标签分类',
									trigger: 'change',
								},
							],
						},
					],
				},
		  ]
		: [
				{
					title: '',
					formList: [
						{
							label: '分类名称',
							prop: 'categoryName',
							type: 'input',
							rules: [
								{
									required: true,
									message: '分类名称不能为空',
									trigger: 'blur',
								},
							],
						},
						{
							label: '分类描述',
							prop: 'description',
							type: 'input',
							attrs: {
								type: 'textarea',
							},
						},
					],
				},
		  ]
})
const openModel = () => {
	// formWrapRef.value.resetFields()
	tagsForm.id = null
	tagsForm.categoryId = null
	tagsForm.tagName = ''
	tagsForm.categoryName = ''
	tagsForm.description = ''
	if (tabActive.value === 1) {
		dialogTitle.value = '添加标签'
	} else {
		dialogTitle.value = '添加分类'
	}
	visible.value = true
}
// 获取标签分类列表
const allCategoryList = ref([])
const getTagLabelList = async () => {
	const { code, data: res } = await getTagsSortList({
		enterpriseId: userStorage.get().enterpriseId,
	})
	if (code === 200) {
		if (res) {
			const list = (res as Array<any>) || []
			allCategoryList.value = list
			categoryList.value = list.map((item) => {
				return {
					label: item.categoryName,
					value: item.id,
				}
			})
		}
	}
}
getTagLabelList()
// 创建保存
const formWrapRef = ref(null)

const save = () => {
	formWrapRef.value.validate().then(async (res) => {
		if (res) {
			//创建标签

			// 创建分类
			const {
				code,
				data: res,
				message,
			} = tabActive.value === 1
				? dialogTitle.value === '编辑标签'
					? await EditTags({
							id: tagsForm.id,
							tagName: tagsForm.tagName,
							categoryId: tagsForm.categoryId,
							enterpriseId: tagsForm.enterpriseId,
					  })
					: await createTags({
							tagName: tagsForm.tagName,
							categoryId: tagsForm.categoryId,
							enterpriseId: tagsForm.enterpriseId,
					  })
				: dialogTitle.value === '编辑分类'
				? await EditTagsSort({
						id: tagsForm.id,
						categoryName: tagsForm.categoryName,
						description: tagsForm.description,
						enterpriseId: tagsForm.enterpriseId,
				  })
				: await createTagsSort({
						categoryName: tagsForm.categoryName,
						description: tagsForm.description,
						enterpriseId: tagsForm.enterpriseId,
				  })
			if (code === 200) {
				ElMessage.success(message)
				visible.value = false
				if (tabActive.value === 1) {
					tableRef.value && tableRef.value.init()
				} else {
					getTagLabelList()
				}
				tableRef.value.init()
			} else {
				ElMessage.error(message)
			}
		}
	})
}
// 侧边栏操作
const delShow = ref(false)
const controlHandel = (e, row) => {
	const flag = tabActive.value === 1
	tagsForm.id = row.id
	switch (e) {
		case '编辑':
			visible.value = true
			dialogTitle.value = flag ? '编辑标签' : '编辑分类'
			if (flag) {
				tagsForm.tagName = row.tagName
				tagsForm.categoryId = row.categoryId
			} else {
				tagsForm.categoryName = row.categoryName
				tagsForm.description = row.description
			}
			break
		case '删除':
			delShow.value = true
			break
	}
}
// 删除列表后的
const updateList = () => {
	if (tabActive.value === 1) {
	} else {
		getTagLabelList()
	}
	tableRef.value && tableRef.value.init()
}
</script>

<style scoped lang="less">
.formWrap {
	margin-top: 20px;
}
</style>
